1 00:00:00,890 --> 00:00:02,090 Thanks for joining me. 2 00:00:02,090 --> 00:00:05,600 I have a challenge for you in this lecture. 3 00:00:05,600 --> 00:00:11,570 Your goal is to replicate this guy you see on my screen as much as possible. 4 00:00:11,570 --> 00:00:18,080 This guy should keep a consistent shape even when the screen is resized, and the objects within the 5 00:00:18,080 --> 00:00:21,920 guy should also scale and keep a consistent shape. 6 00:00:22,460 --> 00:00:29,120 This guy should also be able to fade out by only changing one transparency property. 7 00:00:29,600 --> 00:00:35,090 So please take a few minutes of your time to recreate this guy you see on the screen. 8 00:00:35,120 --> 00:00:40,850 This is a challenge I'm offering to you, and the only way for you to learn and remember UI design is 9 00:00:40,850 --> 00:00:41,840 by practicing. 10 00:00:41,840 --> 00:00:48,770 So please pause the video, work on your GUI and I'll show you my process of replicating this guy in 11 00:00:48,770 --> 00:00:50,480 the next part of the video. 12 00:00:55,820 --> 00:00:58,730 Okay, now the guy is in the corner of the screen. 13 00:00:58,730 --> 00:01:03,530 Let me go ahead and create a new screen guy inside of starter Guy. 14 00:01:03,530 --> 00:01:08,870 And now one of the first things that I need to do is I need to use a canvas group, because that's the 15 00:01:08,870 --> 00:01:13,730 only way that I'm going to be able to fade out my entire guy from one property. 16 00:01:13,730 --> 00:01:16,520 So let's go ahead and add a canvas group. 17 00:01:17,000 --> 00:01:19,520 Let me go ahead and move this to the center of my screen. 18 00:01:19,520 --> 00:01:21,200 And then I'm going to convert it to scale. 19 00:01:21,200 --> 00:01:23,300 So that way I can scale it up or down. 20 00:01:23,300 --> 00:01:27,260 And then I'll make sure to position it in the center of my screen. 21 00:01:27,260 --> 00:01:31,340 So I'll have to adjust the anchor point to be 0.5 and 0.5. 22 00:01:31,940 --> 00:01:32,930 There we go. 23 00:01:33,020 --> 00:01:38,870 Now I also need to keep this canvas group in a consistent square shape, even when my screen is resized. 24 00:01:38,870 --> 00:01:44,030 So we're going to add a UI aspect ratio constraint with an aspect ratio of one. 25 00:01:44,030 --> 00:01:48,410 That way my canvas group will now always be a square. 26 00:01:48,410 --> 00:01:52,550 And then let me also go ahead and increase the size of my canvas group. 27 00:01:52,550 --> 00:01:56,930 So that way I can try to match the size as much as possible. 28 00:01:56,930 --> 00:01:58,130 That looks good. 29 00:01:59,050 --> 00:02:05,590 Now, the next thing I need to do is to create a grid layout inside of my guy to be able to display 30 00:02:05,590 --> 00:02:08,320 all of these text labels in a grid. 31 00:02:08,350 --> 00:02:15,820 Now, with my original guy here, if we take a look at it, you will notice that even the stroke of 32 00:02:15,820 --> 00:02:24,940 the frame is within the bounds of the guy, and that means it's probably because we have a frame inside 33 00:02:24,940 --> 00:02:31,390 of the canvas group with the stroke applied to it, and the frame inside is just sized down a little 34 00:02:31,390 --> 00:02:35,710 bit to fit that stroke within the bounds of our frame. 35 00:02:35,710 --> 00:02:41,590 Now we could just apply a stroke and a corner directly to our canvas group that we've inserted. 36 00:02:41,590 --> 00:02:49,660 But that would mean that the stroke would be beyond the bounds of our canvas group, which may not be 37 00:02:49,660 --> 00:02:50,200 desired. 38 00:02:50,200 --> 00:02:55,120 And since I want to try and replicate this as much as possible, what I need to do is insert another 39 00:02:55,120 --> 00:02:59,680 frame inside of here and apply a stroke on that and size it down a little bit. 40 00:02:59,680 --> 00:03:03,550 So that way the stroke fits within the canvas group boundaries. 41 00:03:04,370 --> 00:03:08,480 So let's go ahead and add a frame and let me go ahead and size it up. 42 00:03:08,480 --> 00:03:15,230 So the scale should be one on the x axis as well as one on the y axis. 43 00:03:15,350 --> 00:03:20,420 And then for my canvas group I need to completely make the background transparent. 44 00:03:20,420 --> 00:03:26,390 And then for my regular frame, since the background transparency on the other one was slightly transparent. 45 00:03:26,390 --> 00:03:28,010 Let's go ahead and do the same thing here. 46 00:03:28,010 --> 00:03:29,870 We'll do something like 0.75. 47 00:03:30,950 --> 00:03:38,990 And now with our frame, let's go ahead and add our UI stroke as well as the cornering to our UI. 48 00:03:39,710 --> 00:03:45,350 Now you will notice that our UI stroke has been cut off, and that's because it's going outside the 49 00:03:45,350 --> 00:03:46,910 bounds of our canvas group. 50 00:03:46,910 --> 00:03:51,170 So we need to shrink our frame down a little bit to fit in our stroke. 51 00:03:51,170 --> 00:03:54,530 However, the stroke on the other guy is a little bit thicker. 52 00:03:54,530 --> 00:03:56,960 It's probably about 4 or 5 pixels thick. 53 00:03:56,960 --> 00:03:59,240 So let's set the thickness to four. 54 00:03:59,510 --> 00:04:04,670 And then for our frame let's decrease the size by four. 55 00:04:05,790 --> 00:04:10,170 And then decrease the size by four on the y axis as well. 56 00:04:10,170 --> 00:04:15,060 And you will notice that, hey, we got these two bottom corners to fill in, but we didn't get these 57 00:04:15,060 --> 00:04:16,800 two top corners to fill in. 58 00:04:16,980 --> 00:04:20,790 So let's go ahead and actually position this frame in the middle. 59 00:04:20,790 --> 00:04:23,430 So we'll do 0.50.5 anchor point. 60 00:04:23,430 --> 00:04:27,000 And then for the position we'll put it in the center of our canvas group as well. 61 00:04:29,560 --> 00:04:35,920 And now, because our stroke is going to be four studs wide on every single side, we actually need 62 00:04:35,920 --> 00:04:42,190 to subtract the size by a total of eight on the x axis and a total of eight on the y axis. 63 00:04:42,190 --> 00:04:43,150 So there we go. 64 00:04:43,150 --> 00:04:47,980 Now we have our stroke within our canvas group and it's visible. 65 00:04:48,310 --> 00:04:53,170 The cornering looks pretty similar, but the cornering on this one is a little bit larger. 66 00:04:53,170 --> 00:04:57,250 So let's go ahead and increase the offset to about maybe 12. 67 00:04:57,670 --> 00:04:58,990 That looks about right. 68 00:04:59,230 --> 00:05:03,850 And now the next thing we need to do is add a UI grid layout. 69 00:05:04,420 --> 00:05:10,420 Now, I remember that when we were scaling the screen, the objects inside of the GUI were also scaling, 70 00:05:10,420 --> 00:05:17,110 meaning we need to convert this cell size from scale to offset, but we also need to keep the size of 71 00:05:17,110 --> 00:05:19,120 these text labels as a square. 72 00:05:19,120 --> 00:05:22,960 So we're going to also have to use a UI aspect ratio constraint. 73 00:05:22,960 --> 00:05:26,080 Let's add that inside of our UI grid layout. 74 00:05:26,230 --> 00:05:32,470 And then let's go ahead and convert the cell size to be 0.25 on the x axis. 75 00:05:32,470 --> 00:05:35,950 So that way we can fit in each of those different text labels. 76 00:05:35,950 --> 00:05:37,330 We'll set offset to zero. 77 00:05:37,330 --> 00:05:40,300 And then on the y axis we'll set that to zero as well. 78 00:05:40,300 --> 00:05:42,760 And then we'll just set the scale equal to one. 79 00:05:42,760 --> 00:05:46,480 It doesn't really matter because it's going to be limited by our x axis. 80 00:05:46,900 --> 00:05:49,120 Now we can go ahead and add a text label. 81 00:05:49,120 --> 00:05:51,190 Inside of here there's our text label. 82 00:05:51,190 --> 00:05:53,800 Let's go ahead and make the background transparent. 83 00:05:54,700 --> 00:05:59,500 And then let's go ahead and make sure we bold it and then italicize it as it looks like in the other 84 00:05:59,500 --> 00:06:00,100 image. 85 00:06:00,100 --> 00:06:03,040 And then it doesn't really matter what font you use. 86 00:06:03,040 --> 00:06:05,050 I'm just going to pick a random font in here. 87 00:06:05,050 --> 00:06:06,550 Like we'll do this one. 88 00:06:07,150 --> 00:06:09,940 And then I'll make sure to scale the text. 89 00:06:10,240 --> 00:06:12,310 And then I'll make sure to type out the message. 90 00:06:12,310 --> 00:06:15,610 The best scripting course on Udemy. 91 00:06:16,700 --> 00:06:22,760 Now we need to make our text color white, and then we need to apply a stroke around our text. 92 00:06:22,760 --> 00:06:25,790 So let's go ahead and add a UI stroke to our text. 93 00:06:26,060 --> 00:06:28,100 And let's increase the thickness. 94 00:06:28,100 --> 00:06:29,810 Let me try to guesstimate what the thickness is. 95 00:06:29,810 --> 00:06:34,280 It's probably around three and the color can stay at black which is nice. 96 00:06:34,920 --> 00:06:38,940 And then we can go ahead and duplicate this and see if it fits well within. 97 00:06:38,940 --> 00:06:42,270 And it looks like, uh oh, it's not fitting that well. 98 00:06:42,270 --> 00:06:45,180 And that's because we need to change our UI grid layout padding. 99 00:06:45,180 --> 00:06:53,370 So because we're padding by five pixels on the x axis, we need to shrink the size of our text labels 100 00:06:53,370 --> 00:06:55,920 by five pixels on the x axis. 101 00:06:56,520 --> 00:07:02,550 And then for the y axis, I think we also need to subtract that by five. 102 00:07:03,470 --> 00:07:05,870 And then let's go ahead and duplicate. 103 00:07:06,080 --> 00:07:06,770 There we go. 104 00:07:06,770 --> 00:07:10,250 So we got our layer of 4x4 text labels. 105 00:07:10,820 --> 00:07:17,780 And then we kind of notice how on this one, it's all nice and centered within the center of the frame. 106 00:07:17,780 --> 00:07:21,230 So there's nice spacing between the left and the right and the top and the bottom. 107 00:07:21,230 --> 00:07:26,870 So to do that let's go ahead and change the horizontal alignment in our grid layout. 108 00:07:26,870 --> 00:07:28,670 We'll make that center. 109 00:07:28,670 --> 00:07:32,900 And then for the vertical alignment we'll set that to center as well. 110 00:07:33,260 --> 00:07:38,510 Now the last thing we need to do is we need to apply a gradient to the stroke of our frame. 111 00:07:38,510 --> 00:07:41,570 So let's go back to our UI stroke. 112 00:07:41,570 --> 00:07:43,550 Let's add a UI gradient. 113 00:07:44,630 --> 00:07:47,120 And the color needs to be from red to blue. 114 00:07:47,120 --> 00:07:49,310 So let's open up those three dots. 115 00:07:49,310 --> 00:07:51,380 Let's make this color red. 116 00:07:52,110 --> 00:07:54,450 And then let's make this color blue. 117 00:07:56,050 --> 00:07:59,560 Close that out, and then we need to swap the color of the UI stroke to be white. 118 00:07:59,560 --> 00:08:00,940 So that way we can see it. 119 00:08:01,360 --> 00:08:03,070 And then we need to rotate it. 120 00:08:03,070 --> 00:08:06,610 So let's rotate our UI gradient by 90 degrees. 121 00:08:06,820 --> 00:08:08,470 And there we go. 122 00:08:08,470 --> 00:08:13,030 It looks like we got as close as possible to the original guy here. 123 00:08:13,700 --> 00:08:21,110 And if we resize the screen, as you can see that our canvas group is resizing down properly and all 124 00:08:21,110 --> 00:08:24,590 the elements inside of the canvas group are also scaling properly. 125 00:08:25,190 --> 00:08:30,950 Now, the reason it doesn't start scaling down until we hit the y axis on both the top and the bottom 126 00:08:30,950 --> 00:08:31,100 is. 127 00:08:31,100 --> 00:08:32,750 That's because what the size is set to. 128 00:08:32,780 --> 00:08:37,370 So if I were to decrease this and set this to like 0.8 or something like that, now you're going to 129 00:08:37,370 --> 00:08:42,590 notice once it gets within that range, now it's going to scale downwards. 130 00:08:43,220 --> 00:08:49,190 If I decrease this even more, if I do like 0.5 now it's going to resize once it's basically taken up 131 00:08:49,190 --> 00:08:52,400 half the screen across the y axis. 132 00:08:52,400 --> 00:08:53,390 So it's scaling. 133 00:08:53,390 --> 00:08:58,310 That way if I don't want it to scale down until it hits the edge of the screen, then I'll set that 134 00:08:58,310 --> 00:08:59,870 back to one. 135 00:08:59,870 --> 00:09:06,080 And then when I shrink the screen down now, it won't scale down until both edges on the y axis has 136 00:09:06,080 --> 00:09:07,160 hit the screen. 137 00:09:07,930 --> 00:09:10,480 But just like that, we are finished. 138 00:09:10,480 --> 00:09:14,800 I hope you enjoyed this challenge, and I hope it gave you a better understanding of how to utilize 139 00:09:14,800 --> 00:09:20,380 the many different GUI objects and constraints available to you to create GUIs. 140 00:09:20,410 --> 00:09:22,660 See you in the next lecture.